<template>
    <div class="page" :style="{'padding-top':navigationbarHeight+'px'}">
        <TopBar :showName='showName' :keyWords.sync="keyword" :returnFirst.sync="returnFirst"></TopBar>
<!--        <div class="page-top">-->
<!--            <div class="header-search-a">-->
<!--                <input class="search-input" type="text" v-model="keyword" />-->
<!--                <icon class="weui-icon-search_in-box" type="search" size="14"></icon>-->
<!--            </div>-->
<!--        </div>-->
        <div class="Initialization" v-if="keyword==''">
            <div class="page-bottom">
                <div class="bottom-Initialization">
                    <div class="bottom-Initialization-title">
                        热门搜索
                    </div>
                    <div class="bottom-Initialization-list">
                        <div class="bottom-Initialization-item" v-for="item in popularWords" :key="item" @click="addKeyWord(item)">{{item}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="search-result" v-else>
            <div class="search-result-nav" :style="{'top':navigationbarHeight+'px'}">
                <div :class="type=='circle'?'result-nav-item on':'result-nav-item'" @click="onChangeType('circle')"><img :src="type=='circle'?'/static/img/search-circle-active.png':'/static/img/search-circle.png'"/>圈子<text></text></div>
                <div :class="type=='user'?'result-nav-item on':'result-nav-item'" @click="onChangeType('user')"><img :src="type=='user'?'/static/img/search-person-active.png':'/static/img/search-person.png'"/>用户<text></text></div>
                <div :class="type=='article'?'result-nav-item on':'result-nav-item'" @click="onChangeType('article')"><img :src="type=='article'?'/static/img/search-words-active.png':'/static/img/search-words.png'"/>贴文<text></text></div>
                <div :class="type=='topic'?'result-nav-item on':'result-nav-item'" @click="onChangeType('topic')"><img :src="type=='topic'?'/static/img/search-circle-active.png':'/static/img/search-circle.png'"/>话题<text></text></div>
            </div>
            <div class="search-result-content">
                <div class="bottom-circle" v-if="type=='circle'">
                    <div class="bottom-circle-list" v-if="resultList.circle.length>0">
                        <div class="bottom-circle-item" v-for="item in resultList.circle" :key="item.id" @click="skipLoop(item.id)">
                            <div class="circle-item-head">
                                <img :src="item.thumb_img_url">
                            </div>
                            <div class="circle-item-name">
                                <h4>{{item.name}}</h4>
                                <text>{{item.desc}}</text>
                            </div>
                        </div>
                    </div>
                    <div class="bottom-null" v-if="resultList.circle.length==0">
                        <img mode="widthFix" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/bibiji-null.png" />
                        <text>未搜索到相关圈子~</text>
                    </div>
                </div>
                <div class="bottom-user" v-if="type=='user'">
                    <div class="bottom-user-list" v-if="resultList.user.length>0">
                        <div class="bottom-user-item" v-for="item in resultList.user" :key="item.user_id" @click="skipUser(item.user_id)">
                            <div class="user-item-head">
                                <img :src="item.photo_url">
                            </div>
                            <div class="user-item-name">
                                <h4>{{item.nickname}}</h4>
                            </div>
                            <div class="user-item-btn" v-if="item.user_id != user_id">
                                <button size="mini" v-if="item.i_follow_it==0">关注</button>
                                <button size="mini" class="btn-black" v-if="item.i_follow_it==1 && item.it_follow_me==0">已关注</button>
                                <button size="mini" class="btn-black" v-if="item.i_follow_it==1 && item.it_follow_me==1">已互关</button>
                            </div>
                        </div>
                    </div>
                    <div class="bottom-null" v-if="resultList.user.length==0">
                        <img mode="widthFix" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/bibiji-null.png" />
                        <text>未搜索到相关用户~</text>
                    </div>
                </div>
                <div class="bottom-article" v-if="type=='article'">
                    <div class="bottom-article-list" v-if="resultList.article.length>0">
                        <Invitation :Article.sync="resultList.article"></Invitation>
                    </div>
                    <div class="bottom-null" v-if="resultList.article.length==0">
                        <img mode="widthFix" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/bibiji-null.png" />
                        <text>未搜索到相关帖文~</text>
                    </div>
                </div>
                <div class="bottom-topic" v-if="type=='topic'">
                    <div class="bottom-topic-list">
<!--                        <div class="bottom-topic-item" v-for="item in resultList.circle" :key="item.id" @click="skipLoop(item.id)">-->
                        <div class="bottom-topic-item">
                            <div class="topic-item-left">
                                #你好么#
                            </div>
                            <div class="topic-item-right">
                                <p>20人参加</p>
                                <div class="item-right-btn">
                                    <img src="/static/img/right.png">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import TopBar from "@/pages/components/topBar/topBar";
    import Invitation from "@/pages/components/invitationItems/invitation";
    export default {
        name: "searchpage",
        components: {Invitation, TopBar},
        data(){
            return{
                navigationbarHeight: getApp().globalData.navStyle.navigationbarHeight,
                keyword: '',
                showName: 'search',
                type:'',
                returnFirst:false,
                user_id: '',
                //搜索结果
                resultList: {
                    article:[],
                    circle:[],
                    user:[]
                },
                //热门搜索词
                popularWords: ['富婆','交流','二手车','圈']
            }
        },
        onShow(){
          this.user_id = uni.getStorageSync('userId')
        },
        methods:{
            //切换搜索结果列表
            onChangeType(type){
                this.type= type;
                // this.searchAll(this.keyword);
            },
            //点击热门搜索词
            addKeyWord(item){
                this.keyword = item;
            },
            //全局搜索
            async searchAll(key){
                let params = {
                    keyword : key,
                    user_token: uni.getStorageSync('userToken'),
                    type: ''
                }
                const res = await this.$api.searchAll(params);
                if (res.data.level == 'success'){
                    this.resultList = res.data.data;
                    if (res.data.data.circle.length>0){
                        this.type = 'circle';
                    } else if (res.data.data.user.length>0){
                        this.type = 'user';
                    }else if (res.data.data.article.length>0) {
                        this.type = 'article';
                    }
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //搜索圈子列表
            async searchCircle(key){
                let params = {
                    keyword : key,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.searchCircle(params);
                if (res.data.level == 'success'){
                    console.log(res.data.data)
                    this.circleList = res.data.data;
                }else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            //进圈
            skipLoop(id){
                // this.keyword = '';
                // // this.LookUpShow = false;
                uni.navigateTo({
                    url: '/pages/circlebar/circlebarhome/circlebarhome?circle_id='+id
                })
            },
            //用户个人页
            skipUser(id){
                uni.navigateTo({
                    url: "/pages/person/customHomepage/customHomepage?userId="+id
                })
            }
        },
        watch:{
            keyword(newValue, oldValue){
                // this.searchCircle(newValue)
                this.searchAll(newValue)
                this.returnFirst = true;
            }
        }
    }
</script>

<style scoped lang="scss">
    .page{
        background: #F1F4F7;
    }
    .page-top{
        background: #ffffff;
        padding: 20rpx auto;
    }
    .page-bottom{
        margin-top: 20rpx;
        background: #ffffff;
        padding:30rpx;
        /*height: 10rpx;*/
    }
    .search-result{
        padding-top: 100rpx;
        background: #ffffff;
    }
    .bottom-null{
        padding: 30rpx;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text{
            color: #6F7073;
            font-size: 28rpx;
        }
        img{
            width: 50vw;
        }
    }
    //初始化
    .bottom-Initialization{
        .bottom-Initialization-title{
            font-size: 30rpx;
            font-weight: bolder;
        }
        .bottom-Initialization-list{
            padding: 20rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            .bottom-Initialization-item{
                padding: 10rpx;
                background: #eeeeee;
                font-weight: normal;
                font-size: 28rpx;
                margin: 20rpx;
                width: 20%;
                text-align: center;
                border-radius: 30rpx;
            }
        }
    }
    //搜索结果导航栏
    .search-result-nav{
        background: #ffffff;
        width: 100vw;
        position: fixed;
        left: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        border-bottom: 1rpx solid #E6E6E6;
        .result-nav-item{
            width: 25%;
            height: 100rpx;
            line-height: 100rpx;
            font-size: 28rpx;
            color: #BBBCBF;
            font-weight: bold;
            position: relative;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            text{
                position: absolute;
                width: 20%;
                height: 12rpx;
                background: #FFE226;
                bottom: 0;
                left: 40%;
                opacity: 0;
            }
            img{
                width: 30rpx;
                height: 30rpx;
            }
        }
        .on text{
            opacity: 1;
        }
        .result-nav-item.on{
            color: #000000;
        }
    }
    //搜索圈子列表
    .bottom-circle{
        .bottom-circle-list{
            display: flex;
            flex-direction: column;
            justify-content: left;
            /*align-items: center;*/
            .bottom-circle-item{
                display: flex;
                flex-direction: row;
                justify-content: left;
                padding: 20rpx;
                /*align-items: c;*/
                .circle-item-head{
                    width: 120rpx;
                    height: 120rpx;
                    border-radius:6px;
                    overflow: hidden;
                }
                .circle-item-name{
                    padding: 20rpx;
                    max-width: calc(100vw - 200rpx);
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    text-align: left;
                    h4{
                        width: 100%;
                        font-size: 32rpx;
                        line-height: 50rpx;
                        font-weight: bold;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    text{
                        width: 100%;
                        font-size: 28rpx;
                        line-height: 36rpx;
                        font-weight: normal;
                        color: #BBBCBF;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
    }
    //用户列表
    .bottom-user{
        .bottom-user-list{
            display: flex;
            flex-direction: column;
            justify-content: left;
            padding:0 3vw;
            .bottom-user-item{
                display: flex;
                flex-direction: row;
                justify-content: left;
                padding: 30rpx 0;
                border-bottom: 1rpx solid #E6E6E6;
                .user-item-head{
                    width: 15vw;
                    height: 15vw;
                    border-radius:360rpx;
                    overflow: hidden;
                }
                .user-item-name{
                    width: 64vw;
                    padding: 20rpx 2vw;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    text-align: left;
                    h4{
                        width: 100%;
                        font-size: 32rpx;
                        line-height: 50rpx;
                        font-weight: bold;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
                .user-item-btn{
                    width: 15vw;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    text-align: right;
                    button{
                        width: 100%;
                        background: #FFE226;
                        border-radius: 10rpx;
                        font-weight: bolder;
                        text-align: center;
                        padding: 0;
                    }
                    .btn-black{
                        width: 100%;
                        background: #F7F7F7;
                        border-radius: 10rpx;
                        font-weight: bolder;
                        text-align: center;
                        padding: 0;
                    }
                }
            }
        }
    }
    //贴文列表
    .bottom-article{

    }
    //话题列表
    .bottom-topic{
        .bottom-topic-list{
            display: flex;
            flex-direction: column;
            justify-content: left;
            padding:0 30rpx;
            .bottom-topic-item{
                display: flex;
                flex-direction: row;
                justify-content: left;
                padding: 30rpx 0;
                border-bottom: 1rpx solid #E6E6E6;
                .topic-item-left{
                    width: 60%;
                    font-size: 30rpx;
                    color: #000000;
                    font-weight: bold;
                    vertical-align: middle;
                }
                .topic-item-right{
                    width: 60%;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-end;
                    align-items: center;
                    vertical-align: middle;
                    p{
                        display: inline-block;
                        color: #BBBCBF;
                        font-size: 28rpx;
                        line-height: 30rpx;
                        vertical-align: middle;
                    }
                    .item-right-btn{
                        padding: 1rpx 8rpx;
                        vertical-align: middle;
                        img{
                            width: 28rpx;
                            height: 28rpx;
                            vertical-align: middle;
                        }
                    }

                }
            }
        }
    }
</style>